<template>
  <div>
    <div>
      <div class="my-flex">
        <el-input
          placeholder="根据标题搜索"
          clearable
          style="width: 20%; margin-right: 1%"
          v-model="knowledge.title"
        >
        </el-input>
        <el-input
          placeholder="根据作者用户名搜索"
          clearable
          style="width: 20%; margin-right: 1%"
          v-model="knowledge.authorname"
        >
        </el-input>
        <el-button
          icon="el-icon-search"
          circle
          @click="refreshPage()"
        ></el-button>
        <el-button
          icon="el-icon-delete"
          circle
          @click="knowledge = {}"
        ></el-button>
      </div>
      <div class="my-flex">
        <el-table :data="knowledgeList" style="width: 100%">
          <el-table-column type="index" width="50" label="序号">
            <template slot-scope="scope">
              {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="180">
          </el-table-column>
          <el-table-column prop="brief" label="简介" width="250">
          </el-table-column>
          <el-table-column prop="cover" label="封面" width="180">
            <template slot-scope="scope">
              <el-image
                style="width: 180px; height: 80px"
                :src="scope.row.cover"
                fit="fill"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="作者用户名" width="150">
          </el-table-column>
          <el-table-column prop="avatar" label="作者头像" width="150">
            <template slot-scope="scope">
              <el-image
                style="width: 100x; height: 100px"
                :src="scope.row.avatar"
                fit="fill"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column prop="createtime" label="创建时间" width="150">
          </el-table-column>
          <el-table-column prop="updatetime" label="更新时间" width="150">
          </el-table-column>
          <el-table-column prop="iscarousel" label="轮播">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.iscarousel"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="启用"
                inactive-text="禁用"
                :active-value="1"
                :inactive-value="0"
                @change="changeCarousel(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="my-flex">
                <el-button
                  type="warning"
                  style="margin-right: 10px"
                  @click="openDialog(scope.row)"
                  >修改</el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否删除本篇心理知识？"
                  @confirm="deleteKnowledgeById(scope.row)"
                >
                  <el-button slot="reference" type="danger">删除</el-button>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="my-flex">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog title="修改心理知识" :visible.sync="dialogVisible" width="30%">
        <el-form label-position="left" label-width="80px" :model="row">
          <el-form-item label="标题">
            <el-input v-model="row.title"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input v-model="row.brief"></el-input>
          </el-form-item>
          <el-form-item label="封面">
            <el-image
              style="width: 300px; height: 150px"
              :src="row.cover"
              fit="fill"
            ></el-image>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="row.username" :readonly="true"></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.avatar"
              fit="fill"
            ></el-image>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="row.iscarousel"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>

          <el-form-item label="操作">
            <div class="my-flex">
              <el-button type="primary" @click="updateKnowledgeById"
                >确定</el-button
              >
              <el-button @click="dialogVisible = false">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>


<script>
export default {
  created() {
    this.refreshPage();
  },
  computed: {
    //返回封装好的查询参数
    knowledgeParam() {
      let param = this.knowledge;
      param.pageIndex = this.pageIndex;
      param.pageSize = this.pageSize;
      return param;
    },
  },
  data() {
    return {
      dialogVisible: false,
      knowledgeList: [], //心理知识列表
      row: {}, //选中的行
      knowledge: {}, //心理知识查询对象
      pageIndex: 1, //页数
      pageSize: 5, //页大小
      total: 0, //总条数
    };
  },
  methods: {
 
    //页面大小变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.refreshPage();
    },
    //当前页变化
    handleCurrentChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.refreshPage();
    },

    //格式化日期
    formattedDate(originalDate) {
      // 创建 Date 对象
      const date = new Date(originalDate);

      // 使用 Date 对象的方法获取年、月、日、小时、分钟和秒
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2);
      const day = ("0" + date.getDate()).slice(-2);
      const hours = ("0" + date.getHours()).slice(-2);
      const minutes = ("0" + date.getMinutes()).slice(-2);
      const seconds = ("0" + date.getSeconds()).slice(-2);

      // 将获取到的年月日时分秒拼接成指定格式的字符串
      const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return formattedDate;
    },
    //处理knowledgeList
    handleKnowledgeList(knowledgeList) {
      // 使用 map 方法遍历用户列表并执行操作
      const modifiedKnowledgeList = knowledgeList.map((knowledge) => {
        knowledge.avatar =
          this.$store.getters.getIpAddr + "/" + knowledge.avatar;
        knowledge.createtime = this.formattedDate(knowledge.createtime);
        knowledge.updatetime = this.formattedDate(knowledge.updatetime);
        return knowledge;
      });
      return modifiedKnowledgeList;
    },
    //获取根据条件心理知识列表
    getKnowledgeListByConditions() {
      this.$request.postHttp({
        url: "/knowledge/getKnowledgeListByConditions",
        data: this.knowledgeParam,
        success: (data) => {
          if (data.code == 200) {
            this.knowledgeList = this.handleKnowledgeList(data.knowledgeList);
          }
        },
        error: (error) => {},
      });
    }, //获取心理知识总条数
    getKnowledgeCount() {
      this.$request.getHttp({
        url: "/knowledge/getKnowledgeCount",
        success: (data) => {
          if (data.code == 200) {
            this.total = data.total;
          }
        },
        error: (error) => {},
      });
    },
    //刷新页面
    refreshPage() {
      this.getKnowledgeListByConditions();
      this.getKnowledgeCount();
    },
    //修改心理知识展示状态
    changeCarousel(row) {
      this.$request.postHttp({
        url: "/knowledge/updateCarouselById",
        params: {
          knowledgeid: row.knowledgeid,
          iscarousel: row.iscarousel,
        },
        success: (data) => {
          if (data.code == 200) {
            this.$message({
              message: data.msg,
              type: "success",
            });
          }
        },
        error: (error) => {},
      });
    },
    //打开对话框
    openDialog(row) {
      this.row = row;

      this.dialogVisible = true;
    },
    //根据id修改心理知识
    updateKnowledgeById() {
      let row = {};
      row.knowledgeid = this.row.knowledgeid;
      row.title = this.row.title;
      row.brief = this.row.brief;
      row.iscarousel = this.row.iscarousel;

      this.$request.postHttp({
        url: "/knowledge/updateKnowledgeById",
        data: row,
        success: (data) => {
          if (data.code == 200) {
            this.$message({
              message: data.msg,
              type: "success",
            });
            this.dialogVisible = false;
            this.refreshPage();
          }
        },
        error: (error) => {},
      });
    },
    deleteKnowledgeById(row) {
      this.$request.postHttp({
        url: "/knowledge/deleteKnowledgeById",
        params: {
          knowledgeId: row.knowledgeid,
        },
        success: (data) => {
          if (data.code == 200) {
            this.$message({
              message: data.msg,
              type: "success",
            });
            this.refreshPage();
          }
        },
        error: (error) => {},
      });
    },
  },
};
</script>


<style scoped>
.my-flex {
  display: flex;
  align-items: center;
}
</style>